<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://unpkg.com/vue"></script>
		<title></title>
	</head>
	<body>
		<div id="dynamic-component-demo" class="demo">
		  <button
		    v-for="tab in tabs"
		    v-bind:key="tab"
		    v-bind:class="['tab-button', { active: currentTab === tab }]"
		    v-on:click="currentTab = tab"
		  >{{ tab }}</button>
		
		  <component
		    v-bind:is="currentTabComponent"
		    class="tab"
		  ></component>
	</body>
	<script>
		Vue.component('tab-home', { 
			template: '<div>Home component</div>' 
		})
		Vue.component('tab-posts', { 
			template: '<div>Posts component</div>' 
		})
		Vue.component('tab-archive', { 
			template: '<div>Archive component</div>' 
		})
		
		new Vue({
		  el: '#dynamic-component-demo',
		  data: {
		    currentTab: 'Home',
		    tabs: ['Home', 'Posts', 'Archive']
		  },
		  computed: {
		    currentTabComponent: function () {
		      return 'tab-' + this.currentTab.toLowerCase()
		    }
		  }
		})
	</script>
</html>
